<template>
  <el-container class="app-container">
    <el-header style="height: auto">
      <el-row :gutter="20">
        <el-col :span="20">
          <div class="grid-content bg-purple">
            <span v-if="!dataForm.storeInfo.name" style="font-size: 30px;">编辑门店信息</span>
            <span v-else style="font-size: 30px;">{{ dataForm.storeInfo.name }}</span>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <el-button type="primary" v-if="!isEdit" @click="isEdit = !isEdit">
              编辑
            </el-button>
            <el-button type="primary" v-else @click="cancelEdit">取消编辑</el-button>
            <el-button type="danger" v-if="dataForm.businessStatus === 1"
                       @click="changeBusinessStatus"
            >暂停营业
            </el-button>
            <el-button type="success" v-else @click="changeBusinessStatus">恢复营业</el-button>
          </div>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark">营业结算时间：
            <el-select v-model="dataForm.businessHour" placeholder="请选择">
              <el-option :disabled="isShow" v-for="item in businessHours" :key="item.value" :label="item.label"
                         :value="item.value"
              >
              </el-option>
            </el-select>
            报表中心会按营业结算时间，统计每个营业日的营业数据。
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <el-descriptions direction="vertical" :column="1" border>
        <el-descriptions-item label="基础信息">
          <el-alert show-icon title="修改基础信息，将实时更新到打印小票、扫码点餐" :closable="false" type="warning">
          </el-alert>
          <el-row>
            <el-col :span="24">
              <div class="grid-content bg-purple-dark">
                <el-form :rules="rules" style="height: 50px" ref="dataForm.storeInfo" :model="dataForm.storeInfo"
                         label-width="120px"
                >
                  <el-row>
                    <el-col :span="12">
                      <div class="store-info">商户号：{{ dataForm.storeInfo.sellerId }}
                        <el-tag v-if="!isEdit && dataForm.businessStatus === 0" type="danger">暂停营业</el-tag>
                      </div>
                      <el-form-item style="width: 500px" label="门店名称：" prop="name">
                        <el-input :disabled="isShow" v-model="dataForm.storeInfo.name"></el-input>
                      </el-form-item>
                      <el-form-item style="width: 500px" label="门店电话：" prop="sellerTel">
                        <el-input :disabled="isShow" v-model="dataForm.storeInfo.sellerTel"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <div class="store-info">机构编码
                        <el-tooltip effect="dark" placement="top">
                          <div slot="content">
                            如需修改，请联系系统管理员
                          </div>
                          <i class="el-icon-question"></i>
                        </el-tooltip>
                        ：{{ dataForm.agencyNo }}
                      </div>
                      <el-form-item label="品类：" prop="category">
                        <el-cascader :disabled="isShow" style="width: 500px" v-model="dataForm.storeInfo.category"
                                     :options="categorys" placeholder="试试搜索：烤鸭" filterable
                                     :props="{ value: 'categoryId', label: 'categoryName' }"
                        ></el-cascader>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form label-width="110px" ref="mapInfo" :rules="rules" :model="dataForm.storeInfo">
                <el-form-item label="城市区域" prop="adcodes">
                  <el-cascader :disabled="isShow" style="width: 655px" :options="areaData" filterable
                               @change="startAddressChange" v-model="dataForm.storeInfo.adcodes"
                  ></el-cascader>
                </el-form-item>
                <el-form-item label="详细地址" prop="street">
                  <el-autocomplete :disabled="isShow" style="width: 655px"
                                   v-model="dataForm.storeInfo.selectArea.street" :fetch-suggestions="querySearch"
                                   :highlight-first-item="true" placeholder="请输入内容" @select="handleSelect"
                                   :trigger-on-focus="false"
                  ></el-autocomplete>
                </el-form-item>
                <el-form-item prop="addressDetails" style="margin-top: -5px;">
                  <el-input clearable type="textarea" :rows="7" :disabled="isShow"
                            placeholder="如道路、小区、楼栋号、单元号、楼层、门牌号等"
                            v-model="dataForm.storeInfo.selectArea.addressDetails" style="width: 655px"
                  ></el-input>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="12">
              <div>
                <!-- 地图容器 -->
                <div id="container" style="width: 650px;height: 265px"></div>
              </div>
            </el-col>
          </el-row>
        </el-descriptions-item>
        <el-descriptions-item label="营业信息">
          <el-row style="margin-bottom: 15px">
            <el-col :span="24" style="font-size: 16px;color: #00a0e9">基本信息</el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form :model="dataForm.basicInfo" :rules="rules" ref="dataForm.basicInfo1" label-width="120px"
                       class="demo-ruleForm"
              >
                <el-form-item label="营业时间：" required>
                  <el-col :span="11">
                    <el-form-item prop="businessStartTime">
                      <el-time-picker :disabled="isShow" value-format="HH:mm" format="HH:mm" style="width: 100%;"
                                      v-model="dataForm.basicInfo.businessStartTime"
                      >
                      </el-time-picker>
                    </el-form-item>
                  </el-col>
                  <el-col class="line" :span="1">&nbsp;&nbsp;至</el-col>
                  <el-col :span="11">
                    <el-form-item prop="businessEndTime">
                      <el-time-picker :disabled="isShow" style="width: 100%;" value-format="HH:mm" format="HH:mm"
                                      v-model="dataForm.basicInfo.businessEndTime"
                      >
                      </el-time-picker>
                    </el-form-item>
                  </el-col>
                </el-form-item>
                <el-form-item label="人均消费：" prop="consumptionPerPerson">
                  <el-input :disabled="isShow" v-model.number="dataForm.basicInfo.consumptionPerPerson">
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="餐厅特色：">
                  <el-select :disabled="isShow" v-model="dataForm.basicInfo.restaurantFeatures" multiple filterable
                             style="width: 100%;" no-data-text="输入内容并敲击回车键选择即可" allow-create
                             default-first-option
                  >
                    <el-option v-for="item in restaurantFeatureList" :key="item.value" :label="item.label"
                               :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="餐厅宣传语：" prop="restaurantSlogan">
                  <el-input :disabled="isShow" v-model="dataForm.basicInfo.restaurantSlogan"
                            placeholder="最多50字"
                  ></el-input>
                </el-form-item>
                <el-form-item label="餐厅介绍：" prop="introduction">
                  <el-input :disabled="isShow" type="textarea" v-model="dataForm.basicInfo.introduction"
                            placeholder="最多120字"
                  ></el-input>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="12">
              <el-form :model="dataForm.basicInfo" :rules="rules" ref="dataForm.basicInfo2" label-width="130px"
                       class="demo-ruleForm"
              >
                <el-form-item label="营业面积：" prop="businessArea">
                  <el-input :disabled="isShow" v-model.number="dataForm.basicInfo.businessArea">
                    <template slot="append">m²</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="租金：" prop="rent">
                  <el-input :disabled="isShow" v-model.number="dataForm.basicInfo.rent">
                    <template slot="append">元/月</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="员工数：" prop="staffNumber">
                  <el-input :disabled="isShow" v-model.number="dataForm.basicInfo.staffNumber">
                    <template slot="append">人</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="厨房面积：" prop="kitchenArea">
                  <el-input :disabled="isShow" v-model.number="dataForm.basicInfo.kitchenArea">
                    <template slot="append">m²</template>
                  </el-input>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <el-row style="margin-bottom: 15px">
            <el-col :span="24" style="font-size: 16px;color: #00a0e9">餐厅图片设置</el-col>
          </el-row>
          <el-row>
            <el-col :span="5"><span>餐厅logo图：</span><br><span
              style="font-size: 12px; color: rgb(140, 147, 157);"
            >最多上传1张，扫码点餐时展示<el-tooltip effect="dark"
                                                   placement="top"
            >
                  <div slot="content">
                    可在【运营中心-手机点餐设置-门店管理】中设置是否展示
                  </div>
                  <i class="el-icon-question"></i>
                </el-tooltip></span>
              <br>
              <!-- 缩略图显示-->
              <div class="img-show" v-if="dataForm.basicInfo.ewmLogo">
                <img :src="dataForm.basicInfo.ewmLogo" class="avatar">
                <span class="actions">
                  <!-- 放大 -->
                  <span class="item">
                    <i class="el-icon-zoom-in" @click="enlarge()"></i>
                  </span>
                  <!-- 删除 -->
                  <span class="item">
                    <i class="el-icon-delete" v-if="!isShow" @click="del()"></i>
                  </span>
                </span>
              </div>
              <!-- 图片上传 -->
              <el-upload v-else :action="uploadAction" class="uploader-avatar" list-type="picture"
                         :show-file-list="false" :disabled="isShow" :on-exceed="fileExceed"
                         :before-upload="beforeAvatarUpload"
                         :on-success="logoHandleAvatarSuccess"
              >
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <!-- 图片显示对话框 -->
              <el-dialog :visible.sync="logoDialogVisible">
                <img width="100%" :src="logoDialogImageUrl" alt="">
              </el-dialog>
            </el-col>
            <el-col :span="5"><span>餐厅门头图：</span><br><span style="font-size: 12px; color: rgb(140, 147, 157);">最多上传1张
                ·</span>
              <br>
              <!-- 缩略图显示-->
              <div class="img-show" v-if="dataForm.basicInfo.viewOfDoorUrl">
                <img :src="dataForm.basicInfo.viewOfDoorUrl" class="avatar">
                <span class="actions">
                  <!-- 放大 -->
                  <span class="item">
                    <i class="el-icon-zoom-in" @click="doorEnlarge()"></i>
                  </span>
                  <!-- 删除 -->
                  <span class="item">
                    <i class="el-icon-delete" v-if="!isShow" @click="doorDel()"></i>
                  </span>
                </span>
              </div>
              <!-- 图片上传 -->
              <el-upload v-else :action="uploadAction" :disabled="isShow" class="uploader-avatar" list-type="picture"
                         :show-file-list="false" :before-upload="beforeAvatarUpload"
                         :on-success="doorHandleAvatarSuccess"
              >
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <!-- 图片显示对话框 -->
              <el-dialog :visible.sync="doorDialogVisible">
                <img width="100%" :src="doorDialogImageUrl" alt="">
              </el-dialog>
            </el-col>
            <el-col :span="14"><span>餐厅环境图：</span><br><span style="font-size: 12px; color: rgb(140, 147, 157);">最多上传5张
                ·</span>
              <br>
              <el-upload :limit="5" class="upload-demo" :disabled="isShow" :action="uploadAction"
                         :on-preview="handlePictureCardPreview" :before-upload="beforeAvatarUpload"
                         :on-success="handleAvatarSuccess" :on-exceed="envFileExceed" :on-remove="handleRemove"
                         :file-list="this.dataForm.basicInfo.envUrl" list-type="picture-card"
              >
                <i slot="default" class="el-icon-plus"></i>
                <div slot="file" slot-scope="{file}">
                  <img class="avatar" :src="file.url" alt="">
                  <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <span v-if="!isShow" class="el-upload-list__item-delete" @click="handleRemove(file)">
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
              <el-dialog :visible.sync="envDialogVisible">
                <img width="100%" :src="envDialogImageUrl" alt="">
              </el-dialog>
            </el-col>
          </el-row>
          <el-row style="margin-top: 10px;">
            <el-col :span="24">
              上传图片格式规则：
              <br>
              支持.png, .jpg, .jpeg格式，建议图片长宽比4:3，图片小于5M
            </el-col>
          </el-row>
        </el-descriptions-item>
      </el-descriptions>
    </el-main>
    <el-footer>
      <el-row>
        <el-col :span="21">
          &nbsp;
        </el-col>
        <el-col :span="3" v-if="isEdit">
          <el-button :disabled="submitDisabled" @click="getStoreFileInfo">
            取消
          </el-button>
          <el-button type="primary" :disabled="submitDisabled"
                     @click="saveDataForm(['dataForm.basicInfo1', 'dataForm.basicInfo2', 'dataForm.storeInfo', 'mapInfo'])"
          >
            确定
          </el-button>
        </el-col>
      </el-row>
    </el-footer>
  </el-container>
</template>
<script>

import AMapLoader from '@amap/amap-jsapi-loader'
import * as Utils from '@/utils/amap/mapUtils'
import * as LocationAMap from '@/utils/amap/positionLocation'
import { Area } from '@/utils/amap/areaData'
import { getPoiInfo } from '@/api/seller'
import { listCategory } from '@/api/category'

export default {
  data() {
    let checkBusinessInfo = (rule, value, callback) => {
      if ((value === null || value === '')) {
        callback()
      } else {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'))
        }
      }
    }
    let checkBusinessInfoOne = (rule, value, callback) => {
      if ((value === null || value === '')) {
        callback()
      } else {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'))
        }
      }
    }
    let checkBusinessInfoTwo = (rule, value, callback) => {
      if ((value === null || value === '')) {
        callback()
      } else {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'))
        }
      }
    }
    let checkBusinessInfoThree = (rule, value, callback) => {
      if ((value === null || value === '')) {
        callback()
      } else {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'))
        }
      }
    }
    let checkBusinessInfoFour = (rule, value, callback) => {
      if ((value === null || value === '')) {
        callback()
      } else {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'))
        }
      }
    }
    let checkStreet = (rule, value, callback) => {
      if (!this.dataForm.storeInfo.selectArea.street) {
        callback(new Error('详细地址不能空'))
      } else {
        callback()
      }
    }
    return {
      submitDisabled: false,
      isLogoUpHide: false,
      logoDialogImageUrl: '',
      logoDialogVisible: false,
      doorDialogImageUrl: '',
      doorDialogVisible: false,
      envDialogImageUrl: '',
      envDialogVisible: false,
      map: '',
      restaurants: [],
      lnt: null,
      lat: null,
      objEditData: {
        selectedOptionsStart: ['', '', ''], // 省市区 编码
        addressDetails: null, // 出险地点 详细地址
        lnt: null,
        lat: null
      },
      areaData: Area, // 省-市-区三级联动选择
      uploadAction: '',
      fileList: [],
      businessHours: [
        { value: 0, label: '00:00:00' },
        { value: 1, label: '01:00:00' },
        { value: 2, label: '02:00:00' },
        { value: 3, label: '03:00:00' },
        { value: 4, label: '04:00:00' },
        { value: 5, label: '05:00:00' },
        { value: 6, label: '06:00:00' },
        { value: 7, label: '07:00:00' },
        { value: 8, label: '08:00:00' },
        { value: 9, label: '09:00:00' },
        { value: 10, label: '10:00:00' },
        { value: 11, label: '11:00:00' },
        { value: 12, label: '12:00:00' },
        { value: 13, label: '13:00:00' },
        { value: 14, label: '14:00:00' },
        { value: 15, label: '15:00:00' },
        { value: 16, label: '16:00:00' },
        { value: 17, label: '17:00:00' },
        { value: 18, label: '18:00:00' },
        { value: 19, label: '19:00:00' },
        { value: 20, label: '20:00:00' },
        { value: 21, label: '21:00:00' },
        { value: 22, label: '22:00:00' },
        { value: 23, label: '23:00:00' }
      ],
      categorys: [],
      restaurantFeatureList: [],
      businessRangeTime: [],
      isEdit: false,
      dataForm: {
        businessStatus: 1,
        id: null,
        businessHour: 0,
        storeInfo: {
          sellerId: null,
          name: '',
          sellerTel: null,
          category: [],
          organizationCode: 0,
          selectArea: {
            provinceName: '',
            cityName: '',
            countyName: '',
            street: '',
            addressDetails: ''
          },
          adcodes: [],
          lnt: null,
          lat: null
        },
        basicInfo: {
          businessStartTime: '',
          businessEndTime: '',
          consumptionPerPerson: null,
          restaurantFeatures: [],
          restaurantSlogan: '',
          introduction: '',
          businessArea: null,
          staffNumber: null,
          kitchenArea: null,
          rent: null,
          ewmLogo: '',
          viewOfDoorUrl: '',
          envUrl: []
        }
      },
      rules: {
        name: [{ required: true, message: '门店名称不能空', trigger: 'change' }],
        sellerTel: [{ required: true, message: '门店电话不能空', trigger: 'change' }],
        category: [{ type: 'array', required: true, message: '品类不能空', trigger: 'change' }],
        consumptionPerPerson: [{ validator: checkBusinessInfo, message: '请输入正整数' }],
        businessStartTime: [{ required: true, message: '营业开始时间不能空', trigger: 'change' }],
        businessEndTime: [{ required: true, message: '营业结束时间不能空', trigger: 'change' }],
        restaurantSlogan: [{ max: 50, message: '最多50个字', trigger: 'change' }],
        introduction: [{ max: 120, message: '最多120个字', trigger: 'change' }],
        businessArea: [{ validator: checkBusinessInfoOne, message: '请输入正整数', trigger: 'change' }],
        rent: [{ validator: checkBusinessInfoTwo, message: '请输入正整数', trigger: 'change' }],
        staffNumber: [{ validator: checkBusinessInfoThree, message: '请输入正整数', trigger: 'change' }],
        kitchenArea: [{ validator: checkBusinessInfoFour, message: '请输入正整数', trigger: 'change' }],
        adcodes: [{ type: 'array', required: true, message: '城市区域不能空', trigger: 'change' }],
        street: [{ required: true, validator: checkStreet, trigger: 'change' }]
      }
    }
  },
  computed: {
    /**
     * 节点表
     * @returns {({content: string, timestamp: string})[]}
     */
    activities() {
      let date = new Date()
      let todayDate = date.getDate()
      date.setDate(todayDate + 1)
      let tomorrowDate = date.getDate()
      date.setDate(tomorrowDate + 1)
      let afterTomorrowDate = date.getDate()

      return [
        { content: '00:00:00', timestamp: date.getMonth() + 1 + '月' + todayDate + '日' },
        { content: '00:00:00', timestamp: date.getMonth() + 1 + '月' + tomorrowDate + '日' },
        {
          content: this.businessHours[this.dataForm.businessHour].label,
          timestamp: date.getMonth() + 1 + '月' + afterTomorrowDate + '日'
        }
      ]
    },
    resetFiled() {
      return {
        id: null,
        businessHour: 0,
        businessStatus: 1,
        storeInfo: {
          sellerId: null,
          name: '',
          sellerTel: null,
          category: [],
          organizationCode: 0,
          selectArea: {
            provinceName: '',
            cityName: '',
            countyName: '',
            street: '',
            addressDetails: ''
          },
          adcodes: [],
          lnt: null,
          lat: null
        },
        basicInfo: {
          businessStartTime: '',
          businessEndTime: '',
          consumptionPerPerson: null,
          restaurantFeatures: [],
          restaurantSlogan: '',
          introduction: '',
          businessArea: null,
          staffNumber: null,
          kitchenArea: null,
          rent: null,
          ewmLogo: '',
          viewOfDoorUrl: '',
          envUrl: []
        }
      }
    },
    /**
     * 大后天date
     * @returns {string}
     */
    threeDaysLaterDate() {
      let date = new Date()
      date.setDate(date.getDate() + 3)
      return date.getMonth() + 1 + '月' + date.getDate() + '日'
    },
    /**
     * 计算一秒之前的时间
     * @returns {string}
     */
    oneSecBeforeDate() {
      let d1 = new Date()
      let t = this.businessHours[this.dataForm.businessHour].label.toString().split(':')
      d1.setHours(Number.parseInt(t[0]), Number.parseInt(t[1]), Number.parseInt(t[2]))
      return new Date(d1.getTime() - 1000).toTimeString().split(' ')[0]
    },
    /**
     * 获取日期标签
     * @returns {string}
     */
    getDateLabel() {
      return this.businessHours[this.dataForm.businessHour].label
    },
    isShow() {
      return !this.isEdit
    }
  },
  created() {
    this.getCategory()
    LocationAMap.seachList()
    this.getStoreFileInfo()
  },
  mounted() {
    // this.uploadAction = this.$http.adornUrl(`/sys/oss/upload?token=${this.$cookie.get('token')}`)
    this.initMap()
  },
  methods: {
    cancelEdit() {
      this.isEdit = !this.isEdit
      this.getStoreFileInfo()
    },
    getStoreFileInfo() {
      this.isEdit = false
      this.dataForm = this.resetFiled
      getPoiInfo().then(({ data }) => {
        if (data && data.code === 0) {
          let info = data.data
          Object.assign(this.dataForm, info)
          this.dataForm.basicInfo.businessArea = this.dataForm.basicInfo.businessArea ? this.dataForm.basicInfo.businessArea : null
          this.dataForm.basicInfo.rent = this.dataForm.basicInfo.rent ? this.dataForm.basicInfo.rent : null
          this.dataForm.basicInfo.staffNumber = this.dataForm.basicInfo.staffNumber ? this.dataForm.basicInfo.staffNumber : null
          this.dataForm.basicInfo.kitchenArea = this.dataForm.basicInfo.kitchenArea ? this.dataForm.basicInfo.kitchenArea : null
          this.dataForm.basicInfo.consumptionPerPerson = this.dataForm.basicInfo.consumptionPerPerson ? this.dataForm.basicInfo.consumptionPerPerson : null
          this.$nextTick(() => {
            this.initMap(this.dataForm.storeInfo.lnt, this.dataForm.storeInfo.lat, 20)
          })
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    changeBusinessStatus() {
      if (this.dataForm.businessStatus === 0) {
        this.dataForm.businessStatus = 1
      } else {
        this.dataForm.businessStatus = 0
      }
      this.$http({
        url: this.$http.adornUrl(`/store/tstoreseller/update_business_status/${this.dataForm.id}`),
        method: 'put',
        data: this.$http.adornData({
          businessStatus: this.dataForm.businessStatus
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.getStoreFileInfo()
            }
          })
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    saveDataForm(formName) {
      let flag = true
      formName.forEach(item => {
        this.$refs[item].validate((valid) => {
          if (!valid) {
            flag = false
          }
        })
      })
      if (flag) {
        this.submitDisabled = true
        let envUrlBk = this.dataForm.basicInfo.envUrl
        let restaurantFeaturesBk = this.dataForm.basicInfo.restaurantFeatures
        let categoryBk = this.dataForm.storeInfo.category
        this.dataForm.basicInfo.restaurantFeatures = this.dataForm.basicInfo.restaurantFeatures ? this.dataForm.basicInfo.restaurantFeatures.join(',') : ''
        this.dataForm.storeInfo.category = this.dataForm.storeInfo.category[this.dataForm.storeInfo.category.length - 1]
        this.$http({
          url: this.$http.adornUrl('/store/tstoreseller/update_store_file'),
          method: 'post',
          data: this.$http.adornData({
            id: this.dataForm.id,
            businessHour: this.dataForm.businessHour,
            storeInfo: this.dataForm.storeInfo,
            basicInfo: this.dataForm.basicInfo
          })
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getStoreFileInfo()
                this.submitDisabled = false
              }
            })
          } else {
            this.submitDisabled = false
            this.$message.error(data.msg)
          }
        })
        this.dataForm.basicInfo.envUrl = envUrlBk
        this.dataForm.basicInfo.restaurantFeatures = restaurantFeaturesBk
        this.dataForm.storeInfo.category = categoryBk
      }
    },
    getCategory() {
      listCategory().then(({ data }) => {
        if (data && data.code === 0) {
          this.categorys = data.data
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    beforeAvatarUpload(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      let arr = ['jpg', 'jpeg', 'png', 'JPG', 'JPEG', 'PNG']
      if (arr.indexOf(testmsg) === -1) {
        this.$message.error('上传文件格式有误')
        // return false就可以在格式大小不符后返回，不调用接口
        return false
      }
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 5MB')
        return false
      }
    },
    doorHandleAvatarSuccess(res, file) {
      this.dataForm.basicInfo.viewOfDoorUrl = res.url
    },
    logoHandleAvatarSuccess(res, file) {
      this.dataForm.basicInfo.ewmLogo = res.url
    },
    handleAvatarSuccess(response, file, fileList) {
      let obj = {
        name: file.name,
        url: response.url
      }
      fileList.forEach(item => {
      })
      this.dataForm.basicInfo.envUrl.push(obj)
    },
    initMap(lnt, lat, zoom, v) {
      const that = this
      const nowLog = lnt || 116.397559
      const nowLat = lat || 39.89621
      let zoomdata = zoom ? zoom : 12
      this.dataForm.storeInfo.lnt = nowLog
      this.dataForm.storeInfo.lat = nowLat

      AMapLoader.load({
        key: '01953acffcffa85220f045893393b597',
        version: '2.0',
        plugins: ['']
      })
        .then((AMap) => {
          that.map = new AMap.Map('container', {
            zoom: zoomdata,
            center: [nowLog, nowLat]
          })
          new AMap.Marker({
            map: that.map,
            position: new AMap.LngLat(nowLog, nowLat)// 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          })
          AMap.plugin('AMap.CitySearch', function() {
            var citySearch = new AMap.CitySearch()
            citySearch.getLocalCity(function(status, result) {
              if (status === 'complete' && result.info === 'OK') {
                // 查询成功，result即为当前所在城市信息
              }
            })
          })
        })
        .catch((e) => {
        })
    }
    ,
    // 通过 地址 获取 经纬度
    getLngLatFunc() {
      const { provinceName, cityName, countyName, street, addressDetails } = this.dataForm.basicInfo.selectArea
      const address = Utils.stringNullToValue(provinceName) + Utils.stringNullToValue(cityName) + Utils.stringNullToValue(countyName) + Utils.stringNullToValue(street) + Utils.stringNullToValue(addressDetails)
      LocationAMap.getLngLat(address, function(resData) {
        if (resData.status) {
          this.dataForm.storeInfo.lnt = resData.data.LngLat[0]
          this.dataForm.storeInfo.lat = resData.data.LngLat[1]
          // 解决 地图 异步渲染问题
          this.$nextTick(() => {
            this.initMap(this.dataForm.storeInfo.lnt, this.dataForm.storeInfo.lat)
          })
        } else {
          this.$message({
            message: resData.message,
            type: 'warning',
            duration: 2000
          })
        }
      })
    }
    ,
    /**
     * 三级连选 起运地地址
     * @param val
     */
    startAddressChange(val) {
      this.dataForm.basicInfo.selectArea = Utils.areaCode2AreaName(val)
      this.getLngLatFunc()
    }
    ,
    querySearch(queryString, cb) {
      let arr = []
      if (queryString || queryString !== '') {
        LocationAMap.seachList(queryString, this.dataForm.storeInfo.adcodes[2], function(resData) {
          resData.data.forEach(item => {
            let obj = {}
            obj.value = item.name
            obj.location = item.location
            arr.push(obj)
          })
        })
      }
      cb(arr)
    }
    ,
    handleSelect(item) {
      this.dataForm.storeInfo.selectArea.street = item.value
      this.$nextTick(() => {
        let l1 = item.location.split(',')[0]
        let l2 = item.location.split(',')[1]
        this.initMap(l1, l2, 20)
      })
    }
    ,
    logoHandleRemove(file, fileList) {
      this.dataForm.basicInfo.ewmLogo = ''
    }
    ,
    doorHandleRemove(file, fileList) {
      this.dataForm.basicInfo.viewOfDoorUrl = ''
    }
    ,
    handlePictureCardPreview(file) {
      this.envDialogImageUrl = file.url
      this.envDialogVisible = true
    }
    ,
    fileExceed(files, fileList) {
      this.$message.error('最多上传一张图片')
      return false
    }
    ,
    envFileExceed(files, fileList) {
      this.$message.error('最多上传五张图片')
      return false
    }
    ,
    /**
     * 移除餐厅环境图文件列表
     * @param file 文件
     * @param fileList 剩下的文件列表
     */
    handleRemove(file, fileList) {
      let arr = []
      if (fileList && fileList.length > 0) {
        fileList.forEach(item => {
          arr.push(item.response.url)
        })
      }
      this.dataForm.basicInfo.envUrl = arr
    }
    ,
    enlarge() {
      this.logoDialogVisible = true
      this.logoDialogImageUrl = this.dataForm.basicInfo.ewmLogo
    }
    ,
    del() {
      this.logoDialogImageUrl = this.dataForm.basicInfo.ewmLogo = ''
    }
    ,
    doorEnlarge() {
      this.doorDialogVisible = true
      this.doorDialogImageUrl = this.dataForm.basicInfo.viewOfDoorUrl
    }
    ,
    doorDel() {
      this.doorDialogImageUrl = this.dataForm.basicInfo.viewOfDoorUrl = ''
    }
  }
}
</script>

<style scoped>
.store-info {
  margin-left: 30px;
  padding: 10px
}

.logoUpHide {
  display: none;
}

.uploader-avatar >>> .el-upload {
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  width: 148px;
  height: 148px;
  cursor: pointer;
  line-height: 146px;
  vertical-align: top;
  overflow: hidden;
}

.img-show {
  position: relative;
  border: 1px solid #c0ccda;
  border-radius: 6px;
  box-sizing: border-box;
  width: 148px;
  height: 148px;
  cursor: pointer;
  overflow: hidden;
}

.uploader-avatar >>> .el-upload:hover {
  border-color: #409EFF;
}

.uploader-avatar >>> i {
  font-size: 28px;
  color: #8c939d;
}

.avatar {
  width: 148px;
  height: 148px;
  display: block;
}

.actions {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: 148px;
  left: 0;
  top: 0;
  cursor: default;
  text-align: center;
  color: #fff;
  opacity: 0;
  font-size: 20px;
  background-color: rgba(0, 0, 0, .5);
  transition: opacity .3s;
}

.actions:hover {
  opacity: 1;
}

.actions:hover span {
  display: inline-block;
}

.actions span {
  display: none;
  margin: 0 16px;
  cursor: pointer;
}
</style>
